<template>
<div>
    <div id="strategy" class="strategy" style="width:100%;padding-top:100px;">
      <!-- <h2 style="text-align: left;font-weight: bold; color:#3F4A57;padding-top:100px">策略广场</h2> -->
      <div style="height: 60px;display: flex;flex-direction: row;align-items:center;justify-content:space-between;width: 70%;margin-left:15%;">
        <div style="display: flex;flex-direction: row;justify-content:flex-start;align-item:center;">
          <div style="font-size: 24px;color:#00192f;align-self: flex-end;font-weight:600;">策略列表</div>
        </div>
        <!-- <div>
          <span class="glyphicon glyphicon-search"></span>
          <input type="text"  placeholder="策略名称" class="form-control" v-model="keyword" id="search" />
        </div> -->
      </div>
      <div style="width:100%;display: flex;flex-direction: row;flex-wrap: wrap;justify-content: center;">
        <div  v-for="item in dataList" :key="item.testrecord.id"  class="schart" style="width:70%">
          <div style="display:flex;flex-direction:column;">
            <div style="height:100px;display:flex;flex-direction:row;justify-content:space-between;">
              <div style="display:flex;flex-direction:row;margin-left:40px;">
                <div v-if="item.rank === 1" class="rank" style="background:red;">{{item.rank}}</div>
                <div v-if="item.rank === 2" class="rank" style="background:#fb8341;">{{item.rank}}</div>
                <div v-if="item.rank === 3" class="rank" style="background:#e8c55b;">{{item.rank}}</div>
                <div v-if="item.rank > 3" class="rank" style="background:#a8bedc;">{{item.rank}}</div>
                <div class="title_p contentmore" @click="gotoStrategydetail(item.testrecord.id,item.testrecord.strategyid)">{{item.strategyName}}</div>
              </div>
              <div  style="display:flex;flex-direction:row;margin-right:40px;padding:20px 20px;align-items:center;width:200px;">
                <img class="portrait" style="margin-right:10px;" :src="item.userInfo.head"/>
                <div>{{item.userInfo.name}}</div>
              </div>
            </div>
            <div style="display:flex;flex-direction:row;">
              <div class="items">
                <p class="p_f12">策略收益</p>
                <p class="p_f12" style="text-align: center;font-size:20px;color:black;margin-left:10px">{{item.testrecord.profit}}</p>
              </div>
              <div class="items">
                <p class="p_f12">实际收益</p>
                <p class="p_f12" style="text-align: center;font-size:20px;color:black;margin-left:10px">{{item.testrecord.standardprofit}}</p>
              </div>
              <div class="items" style="border: none;width: calc(40% - 2px);">
                <p class="p_f12">回测时间</p>
                <p class="p_f12"  style="font-size:20px;color:black;margin-left:10px">{{item.testrecord.starttime}} - {{item.testrecord.endtime}}</p>
              </div>
            </div>
          </div>
        </div>
        <div class="page" style="width:70%">
          <Pagination :Current.sync="Current" :limit="limit" :totalCount="totalCount" @turn="getDataList"></Pagination>
        </div>
        <!-- <div class="schart" v-for="item in dataList" :key="item.testrecord.id">
          <div
            class="strategyitem"
            style="display: flex;flex-direction:column;justify-content:center;">
            <div style="width: 100%;">
              <p class="title_p">
                <a>期货 AdaptiveMA自适应均线</a>
              </p>
            </div>
            <div class="strategy_charts" id="main1"></div>
            <div style="display: flex;flex-direction: row;">
              <div class="items">
                <p class="p_f12">策略收益</p>
                <p style="text-align: center;">{{item.testrecord.profit}}</p>
              </div>
              <div class="items">
                <p class="p_f12">实际收益</p>
                <p style="text-align: center;">{{item.testrecord.standardprofit}}</p>
              </div>
              <div class="items" style="border: none;width: calc(40% - 2px);">
                <p class="p_f12">回测时间</p>
                <p style="text-align: center;">{{item.testrecord.starttime}}至{{item.testrecord.endtime}}</p>
              </div>
            </div>
            <div style="display: flex;flex-direction:row;justify-content: space-between;margin:10px 28px;">
              <div style="margin-top: 10px;font-size: 14px;"></div>
              <input
                style="background: #3c7eee;width: 106px;height: 40px;color: #fff;border: 0;border-radius: 2px;"
                type="button"
                value="查看详情"
                @click="gotoStrategydetail(item.testrecord.strategyid)"
              />
            </div>
          </div>
        </div> -->
      </div>
      
    </div>
</div>
</template>
<style>
.portrait {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  vertical-align: baseline;
}
.rank{
  width: 80px;
  height: 60px;
  color:#fff;
  font-size:20px;
  font-weight:600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.items {
  width: calc(30% - 2px);
  font-size: 12px;
  display: flex;
  flex-direction: row;
  justify-content:center;
  align-items: center;
}
.strategy_charts {
  margin: 10px 20px;
  width: 340px;
  height: 200px;
}
.strategyitem {
  color: #61676e;
  box-shadow: 1px 1px 3px 0 rgba(193, 193, 193, 0.55);
  width: 100%;
}
.schart {
  margin: 20px 20px 20px 60px;
  background-color: #ffffff;
  box-shadow: 1px 1px 3px 0 rgba(193, 193, 193, 0.55)
}
.title_p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #323f50;
  font-weight: 600;
  font-size: 20px;
  padding: 20px 30px;
}
.title_p a {
  color: #323f50;
}
.p_f12 {
  font-size:18px;
  font-weight:600;
  display: block;
  color: #61676e;
  text-align: center;
}
.contentmore{
  cursor: pointer;
}
.contentmore:hover{
  color: #337ab7;
  text-decoration:underline;
}
</style>
<script>
import moment from "moment"
import Pagination  from './../zujian/Pagination'
export default {
  components: {
    Pagination
  },
  data() {
    return{
      charts: "",
      keyword:'',
      opinion: ["策略收益", "基准收益"],
      opinionData: [{ name: "策略收益" }, { name: "基准收益" }],
      opinionx: [
        "2019-10-1",
        "2019-10-2",
        "2019-10-5",
        "2019-10-7",
        "2019-10-10",
        "201-10-15",
        "2019-10-18"
      ],
      dataList:'',
      Current: 1,
      limit: 6,
      totalCount: 100,
    }
  },
  mounted() {
    this.getDataList()
  },
  methods: {
    gotoStrategydetail(id,strategyId){
      this.$router.push('/backtest_detail')
      localStorage.setItem('backtestId',id)
      localStorage.setItem('strategyId',strategyId)
    },
    getDataList(){
      this.$http.get('rank/square?strategyName=&pageSize='+this.limit+'&pageIndex='+this.Current+'').then((resp) => {
        if (resp.data.status === 200) {
          console.log(resp.data)
          this.totalCount = resp.data.data.total
          this.dataList = resp.data.data.list
          for(let i = 0;i<this.dataList.length;i++){
            this.dataList[i].rank = (i+1)+6*(resp.data.data.pageNum-1)
              this.dataList[i].testrecord.starttime = moment(new Date(parseInt(this.dataList[i].testrecord.starttime))).format("YYYY-MM-DD")
              this.dataList[i].testrecord.endtime = moment(new Date(parseInt(this.dataList[i].testrecord.endtime))).format("YYYY-MM-DD")
              if(this.dataList[i].userInfo.head === null){
                this.dataList[i].userInfo.head = './../../../static/image/默认头像.jpg'
              }
          }
          console
        } else {
          this.$message(resp.data.msg)
        }
      })
    },
    drawPiemain1() {
      this.charts = this.$echarts.init(document.getElementById('main1'));
    //   this.charts = echarts.init(document.getElementById(id));
      this.charts.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985"
            }
          }
        },
        legend: {
          data: this.opinion
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },

        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: this.opinionx
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "策略收益",
            type: "line",
            stack: "总量",
            areaStyle: {},
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: "基准收益",
            type: "line",
            stack: "总量",
            areaStyle: {},
            data: [220, 182, 191, 234, 290, 330, 310]
          }
        ]
      });
    },
  },
}
</script>